<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
<div id="app">
    <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);width: 600px;height: 550px;margin: 0 auto;">

        <el-form id="doctorFrom" ref="addDoctorInfo" :model="addDoctorInfo" :rules="rules" label-width="100px">
            <el-form-item label="请输入姓名" prop="name" style="width: 200px;" >
                <el-input v-model="addDoctorInfo.name" name="name" ></el-input>
            </el-form-item>
            <el-form-item label="请选择性别" prop="sex">
                <select v-model="addDoctorInfo.sex" placeholder="请选择性别" name="sex" style="width: 80px;height: 40px;border: 1.5px #e0e3e9 solid;border-radius: 3px;">
                    <option label="男" value="男"></option>
                    <option label="女" value="女"></option>
                </select>
            </el-form-item>
            <el-form-item label="请输入年龄" prop="age" style="width: 200px;">
                <el-input v-model="addDoctorInfo.age" oninput="value=value.replace(/[^\d]/g,'')" name="age"></el-input>
            </el-form-item>
            <el-form-item label="请输入电话" prop="telephone" style="width: 400px;">
                <el-input v-model="addDoctorInfo.telephone" maxlength="11" oninput = "value=value.replace(/[^\d]/g,'')" name="telephone"></el-input>
            </el-form-item>
            <el-form-item label="请输入地址" prop="address" style="width: 350px;">
                <el-input v-model="addDoctorInfo.address" name="address"></el-input>
            </el-form-item>
            <el-form-item label="科室" prop="kid">
                <select v-model="addDoctorInfo.kid" placeholder="请选择科室" name="kid" style="width: 130px;height: 40px;border: 1.5px #e0e3e9 solid;border-radius: 3px;">
                    <option v-for="(k,i) in kesArr" :label="k.kname" :value="k.id"></option>
                </select>
            </el-form-item>
            <el-form-item label="职称" prop="pid">
                <select v-model="addDoctorInfo.pid" placeholder="请选择职称" name="pid" style="width: 100px;height: 40px;border: 1.5px #e0e3e9 solid;border-radius: 3px;">
                    <option v-for="(p,i) in postArr" :label="p.pname" :value="p.id"></option>
                </select>
            </el-form-item>
            <el-form-item label="角色" prop="rid">
                <select v-model="addDoctorInfo.rid" placeholder="请选择角色" name="rid" style="width: 100px;height: 40px;border: 1.5px #e0e3e9 solid;border-radius: 3px;">
                    <option v-for="(r,i) in roleArr" :label="r.rname" :value="r.id"></option>
                </select>
            </el-form-item>

            <el-form-item label="医生头像"  style="float: left;margin: -500px 340px;">
                <img id="doctorImg" width="50" height="50"/>
                <input @change="chengImg()" id="foo"    type="file" name="headImg" />
            </el-form-item>

            <div style="margin-top: 5px;margin-left: 230px;">
                <el-button type="primary" @click="addDoctor()">提交</el-button>
                <el-button>取消</el-button>
            </div>
            </el-form-item>
        </el-form>
    </div>
</div>
<script>
    $.get("/ssm/doctor/getKes",function (backData) {
        zz.kesArr = backData.data;
    });
    $.get("/ssm/doctor/getPost",function (backData) {
        zz.postArr=backData.data;
    });
    $.get("/ssm/doctor/getRole",function (backData) {
        zz.roleArr=backData.data;
    });
    var zz = new Vue({
        el: "#app",
        data: {

            addDoctorInfo: {},
            kesArr:[],
            postArr:[],
            roleArr:[],
            form: {
                name: '',
                region: '',

            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' },
                ],
                address: [
                    { required: true, message: '请输入地址', trigger: 'blur' },
                ],
                telephone: [
                    { required: true, message: '请输入电话', trigger: 'blur' },
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' },
                ],
                kid: [
                    { required: true, message: '请选择科室', trigger: 'change' },
                ],
                pid: [
                    { required: true, message: '请选择职称', trigger: 'change' },
                ],
                rid: [
                    { required: true, message: '请选择角色权限', trigger: 'change' },
                ],
            }
        },
        methods: {
            chengImg(){
                var  r = new FileReader();
                r.readAsDataURL(foo.files[0]);
                r.onload = function () {
                    doctorImg.src = r.result;
                }
            },
            addDoctor(){
                    zz.$refs["addDoctorInfo"].validate((valid) => {
                        if (valid) {
                            var doctorData = new FormData(doctorFrom);

                            $.ajax({
                                url:"/ssm/doctor/addDoctors",
                                type:"POST",
                                data:doctorData,
                                processData:false,
                                contentType:false,
                                success:function(backData){
                                    if (backData.code === 1){
                                        zz.$message.success('添加成功');
                                        window.location.reload()
                                    }else if(backData.code === 2){
                                        zz.$message.error(backData.msg);
                                    }else{
                                        zz.$message.error('添加失败');
                                    }
                                }
                            });
                        }
                    })
            }
        }


    });
</script>
</body>
</html>
